<template>
    <view class="content">
        <van-popup position="bottom" @click-overlay="closePopup" :show="show" round z-index=104
            custom-style="width: 100%;background:#ffffff;overflow: hidden;height:90% ">
            <view class="popup-content" :style="'height:' + (popupHeight) + 'px'">
                <!-- <scroll-view :refresher-enabled="false" class="scroll-content" scroll-y :lower-threshold="80" show-scrollbar="false"> -->

                <view class="popup-main">
                    <view style="display: flex; justify-content: space-between;">
                        <view class="popupTitle"> {{title}}</view>
                        <van-icon name="cross" size="15" @click="closePopup" />
                    </view>
                    <scroll-view class="scroll-content " scroll-y :lower-threshold="120" show-scrollbar="false" @scrolltolower="loadMore">
                        <view class="commentPopup-wrapper ">
                            <view class="newReply" v-if="thirdCommentList.length>0">
                                <!-- <view class="replyTitle">全部回复</view> -->
                                <view class="replyList">
                                    <view class="reply-item" v-for="(item, index) in thirdCommentList" :key="index">
                                        <view class="userInfo_avatar" @tap="toSendThirdReply(item)"> <img
                                                :src="item.wxUserInfo.avatarUrl? item.wxUserInfo.avatarUrl : defaultAvatarUrl"
                                                alt=""> </view>
                                        <view class="reply-item_left">
                                            <view class="user-info" @tap="toSendThirdReply(item)">
                                                <view class="user-info-left"
                                                    style="display: flex; align-items: center;">
                                                    <view class="user-name">{{ item.wxUserInfo.nickName }}</view>
                                                </view>
                                                <view class="replyTime">{{item.formattedTime}}·回复</view>
                                            </view>
                                            <view class="_parentReplyInfo" v-if="item.parent"
                                                @tap="toShowThirdReply(item)">
                                                <span class="_parentNickName">@{{item.parent.wxUserInfo.nickName
                                                    }}:</span> <span
                                                    class="_parentContent">{{item.parent.content}}</span>
                                            </view>
                                            <view class="comment-content" v-if="index==0" @tap="toSendThirdReply(item)">{{ item.content  }} </view>
                                            <view class="comment-content" v-if="index!==0"><span class="_parentRelyNickName">@{{ item.parentWxUserInfo.nickName }}</span>: <span>{{item.content}}</span></view>


                                            <view class="comment-footer">
                                                <!-- <view class="time" @tap="toSendThirdReply(item)">{{ item.publishTime }} </view> -->
                                                <view class="time"> </view>
                                                <view class="interaction">
                                                    <view @click.stop="handlerThirdReplyLike(item)"
                                                        style="margin-right: 8rpx;">
                                                        <van-icon name="good-job-o" size="15"
                                                            style="color:#888888 !important;" v-if="!item.ifLike" />
                                                        <van-icon name="good-job" size="15"
                                                            style="color:#FF6203 !important;" v-if="item.ifLike" />
                                                    </view>
                                                    <view class="currentNum">{{ item.likeCount }}</view>
                                                </view>
                                            </view>
                                            <!-- <view class="reply_comment_num">
                                                {{item.commentCount}}回复 <van-icon name="arrow" size="12"
                                                    style="margin-left: 24rpx;" />
                                            </view> -->
                                        </view>
                                    </view>
                                    <view v-if="loading" class="loading-text">正在加载...</view>
                                    <view v-if="finished" class="no-more-text">没有更多了</view>
                                </view>
                                <view class="replyList" v-if="thirdCommentList.length==0">
                                    <view class="noReply">当前暂无回复</view>
                                </view>
                            </view>
                        </view>
                    </scroll-view>
                    <van-toast id="van-toast" />
                </view>
            </view>
            <!-- <send-first-reply :show="showSendReply" :pageSymbol="pageSymbol" :comments="commentsData" :defaultAvatarUrl="defaultAvatarUrl"
            :activityId="activityId" :postId="nowReplyId" @closePopup="closePopup"
            @reply-success="handleReplySuccess" :level="currentLevel"></send-first-reply> -->
        </van-popup>
    </view>
</template>

<script>
import Toast from '@/wxcomponents/vant/toast/toast'
import {addCommentApi} from '@/api/activity'
import {getThirdCommentListApi } from '@/api/activity'
import { likeCommentApi } from '@/api/judge' // 导入点赞接口
import { formatRelativeTime } from '@/utils/time-format-utility';

export default {
    components: {
        // sendFirstReply,
    },
    props: {
        show: {
            type: Boolean,
            default: () => false
        },
        comments:{
            type:Object,
            default:()=>{}
        },
        defaultAvatarUrl: {
            type: String,
            default: ''
        },
        activityId:{
            type:String,
            default:''
        },
        commentId:{
            type:String,
            default:''
        }
    },
    data () {
        return {
            curS:0,
            curSName:'',
            date: '',
            title: '完整对话',
            popupHeight: '80%',
            myReplyContent:undefined,
            isSending: false,
            parentId:undefined, // 父评论的 ID
            thirdCommentList:[],
            pageSizeThird:10,
            pageNumThird:1,
            totalThird:0,
            loadingThird:false,
            finishedThird: false,
            nowReplyId:undefined,
            currentLevel:2,
            localComments:'',//主评论时间
        }
    },

    computed: {
    },


    watch: {
        show: {
            immediate: true, // 这句重要
            handler(v) {
                console.log(v, 'v',this.comments,'this.comments')
                if (v) {
                    this.getThirdCommentList()
                }
            },
            deep: true
        },
        comments: {
            immediate: true, // 这句重要
            handler(v) {
                console.log(v, 'v',this.comments,'this.comments')
                if (v) {
                    const processedComments = { ...newVal };
                    // 处理发布时间
                    if (processedComments.publishTime) {
                        processedComments.formattedPublishTime = this.formatTime(processedComments.publishTime);
                    }
                    console.log(comments,'comments')
                    this.localComments = processedComments;
                }
            },
        }

    },
    onLoad () {

    },
    onReady () {
    },

    methods: {   
        // 新增加载更多方法
        loadMore() {
            if (!this.finished) {
                this.getThirdCommentList();
            }
        },    
        formatTime(timestamp) {
            return formatRelativeTime(timestamp);
        },

        closePopup(){
            this.$emit('closeThirdReplyPopup')
        },
        // 点赞
        handlerThirdReplyLike(item){
            item.ifLike = !item.ifLike
            if(item.ifLike){
                item.likeCount++
            }else{
                item.likeCount--
            }
            this.likeComment(item.id)
        },
        clearDataThird(){
            this.thirdCommentList=[]
            this.pageNumThird=1
            this.pageSizeThird =10
            this.totalThird=0
            this.finishedThird=false
            // this.hasData=false
        },
        toSendThirdReply(){},
        // // 二级评论
        // getSecondCommentList() {
        //     return new Promise((resolve, reject) => {
        //         getSecondCommentListApi({
        //             commentId: this.postId,
        //             pageSize: this.pageSize,
        //             pageNum: this.pageNum,
        //             activityId: this.activityId,
        //         }).then(res => {
        //             console.log(res, 'getSecondCommentListApi')
        //             if (res.code === 200) {
        //                 this.total = res.data.total;
        //                 // 修改数据合并方式
        //                 this.secondCommentList = this.pageNum === 1
        //                     ? res.data.list
        //                     : [...this.secondCommentList, ...res.data.list];

        //                 this.finished = this.secondCommentList.length >= this.total;
        //                 this.pageNum++;
        //                 console.log(this.secondCommentList, 'this.secondCommentList')
        //                 this.hasData = this.secondCommentList.length > 0
        //                 resolve(res)
        //             } else {
        //                 reject(res)
        //             }
        //         }).finally(() => {
        //             this.loading = false;
        //         })
        //     })
        // }, 
        getThirdCommentList() {
            if (this.loadingThird || this.finishedThird) return;
            this.loadingThird = true;

            this.clearDataThird()
            return new Promise((resolve, reject) => {
                getThirdCommentListApi({
                    commentId: this.commentId,
                    pageSize: this.pageSizeThird,
                    pageNum: this.pageNumThird,
                    activityId: this.activityId,
                }).then(res => {
                    console.log(res, 'thirdCommentList')
                    if (res.code === 200) {
                        this.total = res.data.total;
                        // 修改数据合并方式
                        // this.thirdCommentList = this.pageNumThird === 1
                        //     ? res.data.list
                        //     : [...this.thirdCommentList, ...res.data.list];
                        const processedList = res.data.list.map(item => ({
                            ...item,
                            formattedTime: this.formatTime(item.publishTime)
                        }));

                        this.thirdCommentList = this.pageNum === 1
                            ? processedList  // 使用处理后的数据
                            : [...this.thirdCommentList, ...processedList];

                        this.finishedThird = this.thirdCommentList.length >= this.totalThird;
                        this.pageNumThird++;
                        console.log(this.thirdCommentList, 'this.thirdCommentList')
                        this.hasData = this.thirdCommentList.length > 0
                        resolve(res)
                    } else {
                        reject(res)
                    }
                }).finally(() => {
                    this.loading = false;
                })
            })
        }, 
        // 点赞接口
         // 点赞  取消点赞
         likeComment(replyId){
            return new Promise((resolve, reject) => {
                const params={
                    commentId:replyId,
                    interactionsTargetType:'comment'
                }
                likeCommentApi(params).then((res) => {
                    console.log(res)
                    if (res.code === 200) {
                        console.log('res-----', res.data)
                        resolve(res)
                    } else {
                        reject(res)
                    }
                })
            })
        },

  },

}
</script>
<style lang="scss" scoped>


::v-deep .van-button__text {
    // display: inline-block;
    display: flex !important;
    flex-direction: column !important;
}
// 滚动
.scroll-content {
    flex: 1;
    height: 1px;
}
// 提示框
.popup-content {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 24px;
    border-radius: 16px;
    overflow: hidden;
    // height:100vh;
    height: 100%;


    .popup-main {
        height: 100%;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
    }


    .popupTitle {
        font-size: 20px;
        text-align: left;
        color: #111111;
        line-height: 20px;
    }


    .commentPopup-wrapper {
        // padding-top: 23px;
    }

    // 综合评论 公用
    .comment-item {
        padding-top: 46rpx;
        background-color: white;
        border-radius: 8rpx;
        overflow: hidden;
        border-bottom: 1rpx solid #efefef;
    }

    .reply-item {
        display: flex;
        margin-bottom: 64rpx;
    }

    .userInfo_avatar {
        img {
            width: 80rpx;
            height: 80rpx;
            border-radius: 50%;
            margin-right: 24rpx;
        }
    }

    .user-info {
        display: flex;
        align-items: center;
        height: 80rpx;
        line-height: 80rpx;
        // justify-content: space-between;

        // .user-info-left {
        //     display: flex;
        //     align-items: center;

        //     img {
        //         width: 80rpx;
        //         height: 80rpx;
        //         border-radius: 50%;
        //         margin-right: 24rpx;
        //     }
        // }
    }

    .user-name {
        margin-left: 10rpx;
        font-size: 28rpx;
        text-align: left;
        color: #333;
        // max-width: 146rpx;
        // white-space: nowrap;
        // /* 防止文本换行 */
        // overflow: hidden;
        // /* 超出部分隐藏 */
        // text-overflow: ellipsis;
        // /* 显示省略号 */
    }
    .replyTime{
        font-weight: 400;
        font-size: 24rpx;
        text-align: left;
        color: #999;
        margin-left: 48rpx;
    }

    .comment-content {
        margin-top: 24rpx;
        font-weight: 400;
        font-size: 32rpx;
        line-height: 48rpx;
        text-align: left;
        color: #333;
        ._parentRelyNickName{
            color: #ff6203;
        }
    }

    ._parentReplyInfo{
        margin-top: 24rpx;
        border-radius: 12rpx;
        background: #f4f4f4;
        padding: 28rpx 24rpx;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;

        ._parentNickName{
            color: #333333;
            font-size: 28rpx;
            font-weight: 400;
            letter-spacing: 0;
        }
       ._parentContent{
            color: #999999;
            font-size: 28rpx;
            font-weight: 400;
            letter-spacing: 0;
        }
    }
    .image-container {
        display: flex;
        flex-wrap: wrap;
        // height: 330rpx;
        width: 100%;

        // gap: 5rpx; /* 新增间距 */
        .imgInfo {
            width: calc((100% - 10rpx)/3);
            /* 调整宽度适配间隙 */
            overflow: hidden;
            /* 防止图片溢出 */
            margin-bottom: 10rpx;
        }

        img {
            height: 220rpx;
            width: 100%;
        }

        .imgInfo:nth-child(2n) {
            margin-bottom: 0rpx;
            /* 调整下间距 */
        }
    }

    .comment-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10rpx 10rpx 40rpx 10rpx;
        font-size: 24rpx;
        color: #999;
    }

    .comment-footer .time {
        font-weight: 400;
        font-size: 24rpx;
        text-align: left;
        color: #999;
    }
    .interaction {
        text-align: right;
        float: right;
        display: flex;
        align-items: center;
    }


    // .reply_tips{
    //     padding-top: 24rpx;
    //     font-weight: 400;
    //     font-size: 24rpx;
    //     text-align: center;
    //     color: #999;
    // }
    // .input-section {
    //     display: flex;
    //     align-items: flex-end; /* 使子元素在交叉轴上底部对齐 */
    //     margin-top: 60rpx;
    // }
    // .my-reply-input{
    //     min-height: 144rpx;
    //     border-radius: 8rpx;
    //     background: #f4f4f4;
    //     padding: 24rpx;
    //     width: 78%;
    // }
    // .send-btn {
    //     margin-left: 16rpx;
    //     padding: 0 16rpx;
    //     height: 40rpx;
    //     line-height: 40rpx;
    //     background-color: #ff6203;
    //     color: white;
    //     border: none;
    //     border-radius: 50rpx;
    //     font-size: 20rpx;
    // }
}
// 最新评论
.newReply{
   margin-top: 40rpx;
    .replyList{
        margin-top: 40rpx;
    }
    .reply-item_left{
        width: calc(100% - 104rpx);
    }

}

// 底部回复
.replyFooter{
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: space-between;
    // padding:12rpx 48rpx;
    width: calc(100% - 96rpx);
    padding-top: 12rpx;
    padding-bottom:calc(48rpx + env(safe-area-inset-bottom));
    background-color: white;
    bottom: 0;
    border-top: 2rpx solid #efefef;


    .replyInput{
        font-weight: 400;
        font-size: 24rpx;
        line-height: 48rpx;
        text-align: left;
        color: #999;
    }
    .reply{
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .reply-interaction{
        display: flex;
        align-items: center;
    }
}
.currentNum{
    font-weight: 400;
    font-size: 24rpx;
    text-align: center;
    color: #333;
}
.disabled-btn {
    // background-color: #cccccc !important;
    border-color: #cccccc !important;
}
.interaction{
    display: flex;
    align-items: center;
}
.loading-text, .no-more-text {
    padding: 20rpx;
    text-align: center;
    color: #888;
    font-size: 24rpx;
}
.l20 {
    margin-left: 20px;
}

.r13 {
    margin-right: 13px;
}

.r8 {
    margin-right: 8px;
}
</style>

